import React from 'react';
import logo from './logo.svg';
import './App.css';
import { ProjectListScreen } from 'screens/project-list';
import { useAuth } from 'context/auth-context';
import { ErrorBoundary } from 'components/error-boundary';
import { FullPageErrorFallback, FullPageLoading } from 'components/lib';

const AuthenticatedApp = React.lazy(() => import('authenticated-app'))
const UnauthenticatedApp = React.lazy(() => import('unauthenticated-app'))

function App() {
  const {user} = useAuth();
  return (
    
    <div className="App">
      <ErrorBoundary fallbackRender={FullPageErrorFallback}>
        <React.Suspense fallback={<FullPageLoading />}>
        {user ? <AuthenticatedApp /> : <UnauthenticatedApp />}     
        </React.Suspense>  
      </ErrorBoundary>
      
    </div>
  );
}

export default App;
